<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="2">
        <template v-for="(item, index) in toolData">
          <div class="basic-field" :key="index">
            <div class="field-title">{{ item.label }}</div>
            <div class="control-wrap">
              <template v-for="(childItem, childIndex) in item.chidren">
                <div :key="childIndex" class="control" :draggable="true" @dragstart="dragstart($event, childItem)">
                  <div class="icon"
                    :style="{
                      backgroundImage: `url(rule/${childItem.icon})`,
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            }">
                  </div>
                  <span style="margin-left: 30px">{{ childItem.label }}</span>
                </div>
              </template>
            </div>
          </div>
        </template>
      </el-col>
      <el-col :span="18">
        <div class="toolbar">
          <el-button size="mini" :disabled="
          nodeDataList.length > 0 && nodeForm.id !== undefined
            ? false
            : true
            " type="primary" @click="handleDeleteNode(nodeForm)">删除</el-button>
          <!--  <el-button type="primary" @click="prview">预览</el-button> -->
          <el-button size="mini" :disabled="nodeDataList.length > 0 ? false : true" type="success"
            @click="clearCavas">清空画布</el-button>
          <el-button type="info" size="mini" @click="importJson">导入JSON</el-button>
          <el-button type="warning" size="mini" @click="exportJson">导出JSON</el-button>
        </div>
        <div class="flow-design" @drop="drop" @dragover="allowDrop">
          <quick-flow ref="flow" :data="flowData" :currentNode="currentNode" @nodeClick="handleNodeClick"
            @nodeDelete="handleDeleteNode" @createLine="createLine" @lineClick="handleLineClick"
            @nodeMove="handleNodeMove" @clearCurrentNode="clearCurrentNode"></quick-flow>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="attribute">
          <el-tabs v-model="activeName" class="demo-tabs">
            <template v-for="(item, index) in attributeData">
              <el-tab-pane :label="item.label" :name="item.value" :key="index">
                <div class="wrap">
                  <template v-if="item.value === 'first'">
                    <el-form label-position="top" ref="formRef" :model="flowForm" size="default">
                      <template v-for="(childItem, childIndex)  in item.chidren">
                        <el-form-item :label="childItem.label" :key="childIndex">
                          <el-input :readonly="true" v-model="flowForm[childItem.value]" />
                        </el-form-item>
                      </template>
                    </el-form>
                  </template>
                  <template v-else-if="item.value === 'bus'">
                    <el-form ref="formRef" label-position="top" :model="busForm" size="default">
                      <template v-for="(childItem, childIndex)  in item.chidren">
                        <template
                          v-if="childItem.type === 'select' && (nodeForm.type === 'biggernode' || nodeForm.type === 'equalnode')">
                          <el-form-item :label="childItem.label" :key="childIndex">
                            <el-select v-model="busForm[childItem.value]">
                              <el-option v-for="(
                                    option, optionsIndex
                                  ) in childItem.options" :key="optionsIndex" :label="option.label"
                                :value="option.value" />
                            </el-select>
                          </el-form-item>
                        </template>
                        <template v-else-if="childItem.type === 'cascader' && nodeForm.type === 'inputnode'">
                          <el-form-item :label="childItem.label" :key="childIndex">
                            <el-cascader v-model="busForm[childItem.value]" :options="childItem.options"></el-cascader>
                          </el-form-item>
                        </template>
                        <template
                          v-else-if="childItem.type === 'input' && (nodeForm.type === 'biggernode' || nodeForm.type === 'equalnode')">
                          <el-form-item v-if="isFunShow(childItem)" :label="getLabel(childItem)" :key="childIndex">
                            <el-input v-model="busForm[childItem.value]" />
                          </el-form-item>
                        </template>
                        <template v-else-if="childItem.type === 'input' && nodeForm.type === 'constnode'">
                          <el-form-item v-if="childItem.value === 'constValue'" :label="childItem.label"
                            :key="childIndex">
                            <el-input v-model="busForm[childItem.value]" />
                          </el-form-item>
                        </template>
                      </template>
                    </el-form>
                  </template>
                  <template v-else-if="item.value === 'second'">
                    <el-form label-position="top" ref="formRef" :model="nodeForm" size="default">
                      <template v-for="(childItem, childIndex)  in item.chidren">
                        <template v-if="childItem.type === 'select'">
                          <el-form-item :label="childItem.label" :key="childIndex">
                            <el-select v-model="nodeForm[childItem.value]" disabled>
                              <el-option v-for="(
                                    option, optionsIndex
                                  ) in childItem.options" :key="optionsIndex" :label="option.label"
                                :value="option.value" />
                            </el-select>
                          </el-form-item>
                        </template>
                        <template v-else>
                          <el-form-item :label="childItem.label" :key="childIndex">
                            <el-input v-model="nodeForm[childItem.value]" :readonly="childItem.value === 'id'" />
                          </el-form-item>
                        </template>
                      </template>
                    </el-form>
                  </template>
                  <template v-else-if="item.value === 'three'">
                    <el-form label-position="top" ref="formRef" :model="lineForm" size="default">
                      <template v-for="(childItem, childIndex)  in item.chidren">
                        <template v-if="childItem.type === 'select'">
                          <el-form-item :label="childItem.label" :key="childIndex">
                            <el-select v-model="lineForm[childItem.value]" disabled>
                              <el-option v-for="(
                                    option, optionsIndex
                                  ) in childItem.options" :key="optionsIndex" :label="option.label"
                                :value="option.value" />
                            </el-select>
                          </el-form-item>
                        </template>
                        <template v-else>
                          <el-form-item :label="childItem.label" :key="childIndex">
                            <el-input v-model="lineForm[childItem.value]" :readonly="childItem.value === 'id'" />
                          </el-form-item>
                        </template>
                      </template>
                    </el-form>
                  </template>
                </div>
              </el-tab-pane>
            </template>
          </el-tabs>
        </div>
      </el-col>
    </el-row>

    <el-dialog :visible.sync="importDialogVisible" :append-to-body="true" title="导入JSON" width="30%">
      <div class="title">
        JSON格式如下，直接复制生成的json覆盖此处代码点击确定即可
      </div>
      <div>
        <el-input v-model="importJsonContent" :rows="20" type="textarea" placeholder="Please input" />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="importDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleImport"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog :visible.sync="exportDialogVisible" :append-to-body="true" title="导出JSON" width="30%">
      <div class="title">
        JSON格式如下，直接复制生成的json覆盖代码的配置项即可
      </div>
      <div>
        <el-input v-model="exportJsonContent" :rows="20" type="textarea" placeholder="Please input" />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="exportDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { v4 as uuid } from "uuid";
import QuickFlow from "@/components/QuickFlow";
import { Getcharacteristic, getfunction, getRuleType } from '@/api/system/ruleManage'

export default {
  name: "flowDesign",
  props: {
    data: {
      type: Object,
      default: () => { },
    },
    nodes: {
      type: Array,
      default: () => [],
    },
    lines: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    QuickFlow,
  },
  directives: {
    drag: {
      inserted(el, binding, vnode) {
        const self = vnode.context
        const odiv = el;
        odiv.onmousedown = (e) => {
          const disX = e.clientX - odiv.offsetLeft;
          const disY = e.clientY - odiv.offsetTop;
          document.onmousemove = (e1) => {
            const left = e1.clientX - disX;
            const top = e1.clientY - disY;

            // el.style.left = left + 'px'
            // el.style.top = top + 'px'
            self.item.x = left;
            self.item.y = top;
            self.$emit('nodeMove', self.item)
          };
          document.onmouseup = () => {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      },
    },
    vDrag: {
      inserted(el) {
        const odiv = el;
        odiv.onmousedown = (e) => {
          const disX = e.clientX - odiv.offsetLeft;
          const disY = e.clientY - odiv.offsetTop;
          document.onmousemove = (e1) => {
            const left = e1.clientX - disX;
            const top = e1.clientY - disY;
            odiv.style.left = `${left}px`;
            odiv.style.top = `${top}px`;
          };
          document.onmouseup = () => {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      },
    },
    vMove: {
      inserted(el) {
        const self = this;
        const odiv = el;
        odiv.onmousedown = (e) => {
          const disX = e.clientX - odiv.offsetLeft;
          const disY = e.clientY - odiv.offsetTop;
          document.onmousemove = (e1) => {
            const left = e1.clientX - disX;
            const top = e1.clientY - disY;
            self.x = left;
            self.y = top;
          };
          document.onmouseup = () => {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      },
    },
  },
  watch: {
    ruleTypeList: {
      handler(val) {
        const rule = val.find(x => x.value == this.flowForm.type)
        this.flowForm.type = rule && rule.label
      },
      deep: true,
    },
    flowForm: {
      handler(val) {
        this.flowData.id = val.id
        this.flowData.name = val.name
        this.flowData.type = val.type
        this.flowData.description = val.description
      },
      deep: true,
    },
    busForm: {
      handler(val) {
        this.nodeDataList.map((element) => {
          if (element.id === val.nodeId) {
            element.constValue = val.constValue;
            element.characteristicCode = val.characteristicCode
            element.fun = val.fun;
            element.text1 = val.text1;
            element.text2 = val.text2;
          }
        });
        console.log("nodeDataList1", this.nodeDataList);
      },
      deep: true,
    },
    nodeForm: {
      handler(val) {
        this.nodeDataList.map((element) => {
          if (element.id === val.id) {
            element.name = val.name;
            element.x = val.x;
            element.y = val.y;
            element.width = val.width;
            element.height = val.height;
            element.color = val.color;
            element.backgroundColor = val.backgroundColor;
          }
        });
        console.log("nodeDataList2", this.nodeDataList);
      },
      deep: true,
    },
    lineForm: {
      handler(val) {
        this.lineDataList.map((element) => {
          if (element.id === val.id) {
            element.type = val.type;
            element.backgroundColor = val.backgroundColor;
            element.x1 = val.x1;
            element.y1 = val.y1;
            element.x2 = val.x2;
            element.y2 = val.y2;
            element.fromNodeId = val.fromNodeId;
            element.toNodeId = val.toNodeId;
          }
        });
        console.log("lineDataList", this.lineDataList);
      },
      deep: true,
    },
  },
  mounted() {
    this.getSelect()
    this.flowForm.id = this.data.id
    this.flowForm.name = this.data.ruleName
    this.flowForm.type = this.data.ruleType
    this.flowForm.description = this.data.ruleDescribe
    this.nodeDataList = this.nodes
    this.lineDataList = this.lines
    this.flowData.nodes = this.nodeDataList;
    this.flowData.lines = this.lineDataList;
  },
  data() {
    return {
      currentNode: {},
      ruleTypeList: [],
      dragNode: "",
      activeName: "bus",
      importDialogVisible: false,
      importJsonContent: "",
      exportDialogVisible: false,
      exportJsonContent: "",
      toolData: [
        {
          value: 1,
          label: "规则组件",
          chidren: [
            // {
            //   value: 1,
            //   label: "指针",
            //   icon: "cursor.png",
            //   type: "hand",
            //   color: "#000",
            //   backgroundColor: "#fff",
            //   border: "1px solid #4a5b79",
            //   width: 150,
            //   height: 65,
            // },
            // {
            //   value: 2,
            //   label: "步骤连线",
            //   icon: "direct.png",
            //   type: "step-line",
            //   color: "#000",
            //   backgroundColor: "#fff",
            //   border: "1px solid #4a5b79",
            //   width: 150,
            //   height: 65,
            // }, 
            {
              value: 3,
              label: "结论",
              icon: "Conclusion.png",
              type: "conclusionnode",
              color: "#000",
              backgroundColor: "#fff",
              border: "1px solid #4a5b79",
              width: 150,
              height: 65,
              constValue: '',
              characteristicCode: [],
              fun: '',
              text1: '',
              text2: ''
            },
            {
              value: 4,
              label: "输入节点",
              icon: "input.png",
              type: "inputnode",
              color: "#000",
              backgroundColor: "#fff",
              border: "1px solid #4a5b79",
              width: 150,
              height: 65,
              constValue: '',
              characteristicCode: [],
              fun: '',
              text1: '',
              text2: ''
            },
            {
              value: 5,
              label: "常量节点",
              icon: "Const.png",
              type: "constnode",
              color: "#000",
              backgroundColor: "#fff",
              border: "1px solid #4a5b79",
              width: 150,
              height: 65,
              constValue: '',
              characteristicCode: [],
              fun: '',
              text1: '',
              text2: ''
            },
            {
              value: 6,
              label: "乘法节点",
              icon: "Multiply.png",
              type: "multiplynode",
              color: "#000",
              backgroundColor: "#fff",
              border: "1px solid #4a5b79",
              width: 150,
              height: 65,
              constValue: '',
              characteristicCode: [],
              fun: '',
              text1: '',
              text2: ''
            },
            {
              value: 7,
              label: "除法节点",
              icon: "Divide.png",
              type: "dividenode",
              color: "#000",
              backgroundColor: "#fff",
              border: "1px solid #4a5b79",
              width: 150,
              height: 65,
              constValue: '',
              characteristicCode: [],
              fun: '',
              text1: '',
              text2: ''
            },
            {
              value: 8,
              label: "加法节点",
              icon: "Plus.png",
              type: "plusnode",
              color: "#000",
              backgroundColor: "#fff",
              border: "1px solid #4a5b79",
              width: 150,
              height: 65,
              constValue: '',
              characteristicCode: [],
              fun: '',
              text1: '',
              text2: ''
            },
            {
              value: 9,
              label: "减法节点",
              icon: "Minus.png",
              type: "minusnode",
              color: "#000",
              backgroundColor: "#fff",
              border: "1px solid #4a5b79",
              width: 150,
              height: 65,
              constValue: '',
              characteristicCode: [],
              fun: '',
              text1: '',
              text2: ''
            },
            {
              value: 10,
              label: "大于节点",
              icon: "Bigger.png",
              type: "biggernode",
              color: "#000",
              backgroundColor: "#fff",
              border: "1px solid #4a5b79",
              width: 150,
              height: 65,
              constValue: '',
              characteristicCode: [],
              fun: '',
              text1: '',
              text2: ''
            },
            {
              value: 11,
              label: "等于节点",
              icon: "Equal.png",
              type: "equalnode",
              color: "#000",
              backgroundColor: "#fff",
              border: "1px solid #4a5b79",
              width: 150,
              height: 65,
              constValue: '',
              characteristicCode: [],
              fun: '',
              text1: '',
              text2: ''
            },
            {
              value: 12,
              label: "逻辑与",
              icon: "AND.png",
              type: "andnode",
              color: "#000",
              backgroundColor: "#fff",
              border: "1px solid #4a5b79",
              width: 150,
              height: 65,
              constValue: '',
              characteristicCode: [],
              fun: '',
              text1: '',
              text2: ''
            },
            {
              value: 13,
              label: "逻辑或",
              icon: "OR.png",
              type: "ornode",
              color: "#000",
              backgroundColor: "#fff",
              border: "1px solid #4a5b79",
              width: 150,
              height: 65,
              constValue: '',
              characteristicCode: [],
              fun: '',
              text1: '',
              text2: ''
            },
          ],
        },
      ],
      flowForm: {
        id: "",
        name: "",
        description: "",
      },
      busForm: {
        nodeId: '',
        constValue: '',
        characteristicCode: [],
        fun: '',
        text1: '',
        text2: ''
      },
      nodeForm: {
        id: "",
        name: "",
        type: "",
        color: "",
        backgroundColor: "",
        border: "",
        borderRadius: "",
        width: 0,
        height: 0,
        x: 0,
        y: 0,
        icon: "",
      },
      lineForm: {
        id: "",
        type: "",
        backgroundColor: "",
        x1: 0,
        y1: 0,
        x2: 0,
        y2: 0,
        fromNodeId: "",
        toNodeId: "",
        fromPosition: '',
        toPosition: ''
      },
      attributeData: [
        {
          value: "bus",
          label: "业务操作",
          model: {},
          chidren: [
            {
              value: "constValue",
              label: "常量值",
              type: 'input'
            },
            {
              value: "fun",
              label: "函数",
              type: "select",
              options: []
            },
            {
              value: "text1",
              label: "",
              type: "input",
            },
            {
              value: "text2",
              label: "",
              type: "input",
            },
            {
              value: "characteristicCode",
              label: "特征",
              type: "cascader",
              options: []
            },
          ],
        },
      ],
      attributeData1: [
        {
          value: "first",
          label: "规则属性",
          model: {},
          chidren: [
            {
              value: "id",
              label: "规则标识",
            },
            {
              value: "name",
              label: "规则名称",
            },
            {
              value: "type",
              label: "规则类型",
            },
            {
              value: "description",
              label: "规则描述",
            },
          ],
        },
        {
          value: "bus",
          label: "业务操作",
          model: {},
          chidren: [
            {
              value: "constValue",
              label: "常量值",
              type: 'input'
            },
            {
              value: "fun",
              label: "函数",
              type: "select",
              options: []
            },
            {
              value: "text1",
              label: "",
              type: "input",
            },
            {
              value: "text2",
              label: "",
              type: "input",
            },
            {
              value: "characteristicCode",
              label: "特征",
              type: "cascader",
              options: []
            },
          ],
        },
        {
          value: "second",
          label: "节点属性",
          model: {},
          chidren: [
            {
              value: "id",
              label: "标识",
            },
            {
              value: "name",
              label: "节点名称",
            },
            {
              value: "type",
              label: "节点类型",
              type: "select",
              options: [
                {
                  label: "开始",
                  value: "start",
                },
                {
                  label: "结束",
                  value: "end",
                },
                {
                  label: "活动",
                  value: "node",
                },
              ],
            },
            {
              value: "color",
              label: "字体颜色",
            },
            {
              value: "backgroundColor",
              label: "背景色",
            },
            {
              value: "border",
              label: "边框样式",
            },
            {
              value: "borderRadius",
              label: "圆角样式",
            },
            {
              value: "width",
              label: "宽度",
            },
            {
              value: "height",
              label: "高度",
            },
            {
              value: "x",
              label: "x轴",
            },
            {
              value: "y",
              label: "y轴",
            },
            {
              value: "icon",
              label: "图标",
            },
          ],
        },
        {
          value: "three",
          label: "连接线属性",
          model: {},
          chidren: [
            {
              value: "id",
              label: "标识",
            },
            {
              value: "type",
              label: "线类型",
              type: "select",
              options: [
                {
                  label: "实线",
                  value: "solid",
                },
                {
                  label: "虚线",
                  value: "d",
                },
                {
                  label: "流动线",
                  value: "d1",
                },
                {
                  label: "箭头线",
                  value: "jt",
                },
              ],
            },
            {
              value: "backgroundColor",
              label: "背景色",
            },
            {
              value: "x1",
              label: "x1轴",
            },
            {
              value: "y1",
              label: "y1轴",
            },
            {
              value: "x2",
              label: "x2轴",
            },
            {
              value: "y2",
              label: "y2轴",
            },
          ],
        },
      ],
      nodeDataList: [],
      lineDataList: [],
      flowData: {
        id: "",
        name: "",
        description: "",
        nodes: [],
        lines: [],
      },
    };
  },
  methods: {
    isFunShow(childItem) {
      console.log('busForm.fun', this.busForm.fun);
      let isShow = false
      switch (this.busForm.fun) {
        case 1:
        case 2:
          if (childItem.value === 'text1') {
            isShow = true
          } else if (childItem.value === 'text2') {
            isShow = false
          }
          break;
        case 3:
        case 6:
          if (childItem.value === 'text1') {
            isShow = true
          } else if (childItem.value === 'text2') {
            isShow = true
          }
          break;
        case 4:
        case 5:
          if (childItem.value === 'text1') {
            isShow = true
          } else if (childItem.value === 'text2') {
            isShow = false
          }
          break;
        default:
          isShow = false
          break;
      }
      return isShow
    },
    getLabel(childItem) {
      console.log('busForm.fun1', this.busForm.fun);
      switch (this.busForm.fun) {
        case 1:
        case 2:
          if (childItem.value === 'text1') {
            return 'k'
          }
          break;
        case 3:
          if (childItem.value === 'text1') {
            return 'α'
          } else if (childItem.value === 'text2') {
            return 'β'
          }
          break;
        case 4:
        case 5:
          if (childItem.value === 'text1') {
            return 'b'
          }
          break;
        case 6:
          if (childItem.value === 'text1') {
            return 'b'
          } else if (childItem.value === 'text2') {
            return 'k'
          }
          break;
        default:
          break;
      }
    },
    getSelect() {
      getRuleType().then((res) => {
        const data = res.data.data
        this.ruleTypeList = data
      })
      Getcharacteristic().then((res) => {
        const data = res.data.data
        this.attributeData[0].chidren[4].options = data
      })
      getfunction().then((res) => {
        const data = res.data.data
        this.attributeData[0].chidren[1].options = data
      })
    },
    clearCurrentNode() {
      this.currentNode = {}
    },
    handleNodeMove(item) {
      if (item) {
        this.lineDataList.map((element) => {
          if (element.fromNodeId == item.id) {
            let x1 = item.x
            let y1 = item.y
            switch (element.fromPosition) {
              case 'top':
                x1 = x1 + item.width / 2
                break;
              case 'bottom':
                x1 = x1 + item.width / 2
                y1 = y1 + item.height
                break;
              case 'left':
                y1 = y1 + item.height / 2
                break;
              case 'right':
                x1 = x1 + item.width
                y1 = y1 + item.height / 2
                break;

              default:
                break;
            }
            element.x1 = x1
            element.y1 = y1
          } else if (element.toNodeId == item.id) {
            let x2 = item.x
            let y2 = item.y
            switch (element.toPosition) {
              case 'top':
                x2 = x2 + item.width / 2
                break;
              case 'bottom':
                x2 = x2 + item.width / 2
                y2 = y2 + item.height
                break;
              case 'left':
                y2 = y2 + item.height / 2
                break;
              case 'right':
                x2 = x2 + item.width
                y2 = y2 + item.height / 2
                break;

              default:
                break;
            }
            element.x2 = x2
            element.y2 = y2
          }
          return element
        })
        this.flowData.lines = this.lineDataList;
      }
    },
    handleLineClick(item) {
      const { id, type, backgroundColor, x1, y1, x2, y2, toNodeId, fromNodeId, fromPosition, toPosition } =
        item;
      this.lineForm.id = id;
      this.lineForm.type = type;
      this.lineForm.backgroundColor = backgroundColor;
      this.lineForm.x1 = x1;
      this.lineForm.y1 = y1;
      this.lineForm.x2 = x2;
      this.lineForm.y2 = y2;
      this.lineForm.fromNodeId = fromNodeId;
      this.lineForm.toNodeId = toNodeId;
      this.lineForm.fromPosition = fromPosition;
      this.lineForm.toPosition = toPosition;
    },
    handleNodeClick(item) {
      const { id, name, type, color, backgroundColor, width, height, x, y, constValue, characteristicCode, fun, text1, text2 } =
        item;
      this.nodeForm.id = id;
      this.nodeForm.name = name;
      this.nodeForm.type = type;
      this.nodeForm.color = color;
      this.nodeForm.backgroundColor = backgroundColor;
      this.nodeForm.width = width;
      this.nodeForm.height = height;
      this.nodeForm.x = x;
      this.nodeForm.y = y;

      this.busForm.nodeId = id
      this.busForm.constValue = constValue
      this.busForm.characteristicCode = characteristicCode
      this.busForm.fun = fun
      this.busForm.text1 = text1
      this.busForm.text2 = text2

      this.currentNode = item
    },
    handleDeleteNode(item) {
      const index = this.nodeDataList.findIndex(
        (x) => x.id === item.id
      );
      if (index !== -1) {
        this.flowData.nodes = this.nodeDataList;
        const fromNodeArr = this.lineDataList.filter(x => x.fromNodeId == item.id)
        console.log('fromNodeArr', fromNodeArr);
        fromNodeArr.forEach(element => {
          const lineIndex = this.lineDataList.findIndex(x => x.fromNodeId == element.fromNodeId)
          if (lineIndex !== -1) {
            this.lineDataList.splice(lineIndex, 1);
            this.flowData.lines = this.lineDataList;
          }
        });
        const toNodeArr = this.lineDataList.filter(x => x.toNodeId == item.id)
        console.log('toNodeArr', toNodeArr);
        toNodeArr.forEach(element => {
          const lineIndex = this.lineDataList.findIndex(x => x.toNodeId == element.toNodeId)
          if (lineIndex !== -1) {
            this.lineDataList.splice(lineIndex, 1);
            this.flowData.lines = this.lineDataList;
          }
        });
        this.nodeDataList.splice(index, 1);
        this.handleNodeClick({});
      }
    },
    createLine(line) {
      console.log("createLine-flow", line);
      this.lineDataList.push({
        ...line,
      });
      this.flowData.lines = this.lineDataList;
    },
    dragstart(e, item) {
      console.log("拖起");
      this.dragNode = item;
    },
    allowDrop(e) {
      console.log("允许");
      e.preventDefault();
    },
    drop(e) {
      console.log("放下");
      e.preventDefault();
      const left = e.clientX - 450;
      const top = e.clientY - 250;
      this.buildRuleNode(left, top);
      this.dragNode = null;
    },
    buildRuleNode(x, y) {
      if (this.dragNode) {
        const item = {
          id: uuid(),
          name: this.dragNode.label,
          icon: this.dragNode.icon,
          type: this.dragNode.type,
          color: this.dragNode.color,
          backgroundColor: this.dragNode.backgroundColor,
          border: this.dragNode.border,
          width: this.dragNode.width,
          height: this.dragNode.height,
          x,
          y,
          constValue: this.dragNode.constValue,
          characteristicCode: this.dragNode.characteristicCode,
          fun: this.dragNode.fun,
          text1: this.dragNode.text1,
          text2: this.dragNode.text2
        }
        this.nodeDataList.push(item);
        this.flowData.nodes = [...this.nodeDataList];
        this.currentNode = item
      }
    },
    clearCavas() {
      this.nodeDataList = [];
      this.lineDataList.length = [];
      this.flowData.nodes = [];
      this.flowData.lines = [];
      this.handleNodeClick({});
    },
    importJson() {
      this.importDialogVisible = true;
    },
    handleImport() {
      const flow = JSON.parse(this.importJsonContent);
      this.nodeDataList = flow.nodes;
      this.lineDataList = flow.lines;
      this.flowData.nodes = this.nodeDataList
      this.flowData.lines = this.lineDataList
      this.importDialogVisible = false;
    },
    exportJson() {
      this.exportDialogVisible = true;
      this.exportJsonContent = JSON.stringify(this.flowData, null, 8);
    },
    getData() {
      return this.flowData
    }
  },
};
</script>

<style lang="scss">
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.field-title {
  padding: 10px;
}

.control-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .control {
    width: 80px;
    padding: 18px 6px;
    font-size: 12px;
    border: 1px solid transparent;
  }

  .control:hover {
    border: dashed 1px #409eff;
    cursor: move;
  }
}

.toolbar {
  text-align: right;
  margin-right: 20px;
}

.flow-design {
  width: 100%;
  border: 1px dashed #999;
  min-height: calc(100vh - 340px);
  position: relative;
  overflow: hidden;
  margin-top: 10px;
  background: #fff;
  // padding: 30px;
  position: relative;
}

.form-design {
  margin-top: 10px;
  background: #fff;
  border: 1px dashed #999;
  min-height: calc(100vh - 180px);
  padding: 30px;

  .el-form-item {
    border: 1px solid transparent;
    padding: 10px;
  }

  .el-form-item:hover {
    border: dashed 1px #409eff;
    padding: 10px;
    cursor: move;
  }
}

.attribute {
  .wrap {
    max-height: 608px;
    overflow-y: scroll;

    .item {
      .title {
        margin-left: 10px;
      }

      .value {
        margin-top: 10px;
        margin-left: 10px;
      }
    }
  }
}

.icon {
  height: 20px;
  width: 20px;
  position: absolute;
  line-height: 48px;
  background-size: cover;
  background-repeat: no-repeat;
}
</style>